<template>
  <div>
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="margin-bottom: 20px"
    >
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>指定核酬条件</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/channel' }">第一步</el-breadcrumb-item>
      <el-breadcrumb-item>第二步</el-breadcrumb-item>
      <el-breadcrumb-item>第三步</el-breadcrumb-item>
    </el-breadcrumb>
    <div id="head">
      <h3>第三步：制定核酬规则</h3>
    </div>
    <ul>
      <li>
        <span>结算对象：</span>
        <el-radio v-model="radio" label="0" style="margin-left:5px">归属渠道</el-radio>
        <el-radio v-model="radio" label="1" style="margin-left:25px">办理渠道</el-radio>
      </li>
      <li>
        <span>可选分段条件:</span>
        <el-checkbox style="margin-left:15px">渠道类型</el-checkbox>
        <el-checkbox style="margin-left:15px">代理商酬金类型</el-checkbox>
        <el-checkbox style="margin-left:15px">入网方案</el-checkbox>
        <el-checkbox style="margin-left:15px">用户数</el-checkbox>
      </li>
      <li>
        <span>规则表达式:</span> <i :class="icon"  @click="changeIcon">渠道类型</i>       
      </li>
      <li  v-if="iconShow"> 
        <el-select style="width:15vw;margin:0px 10px" v-model="bijiaofu">
        <el-option label='等于' value="0" ></el-option>
        <el-option label='大于' value="1" ></el-option>
        <el-option label='小于' value="2"></el-option>
      </el-select>
      <el-input style="width:15vw;margin:0px 10px" :disabled='true' placeholder="特许，他营他建"
      ></el-input>
      </li>
      <li v-if="iconShow">
        <span>权重类型:</span>
        <el-radio v-model="quanzhong" label="0" style="margin-left:15px"> 统一权重</el-radio>
        <el-radio v-model="quanzhong" label="1"  style="margin-left:15px">分段权重</el-radio>
      </li>
      <li v-if="iconShow">
        <span>用户数:</span><el-input style="width:10vw;margin-left:1vw" v-model.number="user"></el-input>
        <span class="title">返利标准:</span><el-input style="width:10vw" v-model.number="standard"></el-input>
        <span class="title">固定金额:</span><el-input style="width:10vw" v-model.number="price"></el-input>
      </li>
      <li class="middle">
         <el-button @click="preview" class="title middle" type="primary">上一步</el-button>
        <el-button @click="save" class="title middle" type="primary">保存</el-button>   
      </li>
    </ul>

        
     
  </div>
</template>

<script>
export default {
  name:'templateStep3',
  data() {
    return {
      radio: "",
      icon:'el-icon-folder',
      iconShow:false,
      bijiaofu:'',
      quanzhong:"",
      price:"",
      user:'',
      standard:"",
      symbol:''
    };
  },
  methods:{
    changeIcon(){
      this.iconShow= !this.iconShow
      if(this.iconShow==true){
        this.icon="el-icon-folder-opened"
      }
       if(this.iconShow==false){
        this.icon="el-icon-folder"
      }     
    },
    save(){
     this.symbol= this.$route.query.symbol
      this.$axios.post('api/policyRule/insert',{
        userNumber:this.user,
        basicMoney:this.price,
        returnRule:this.standard,
        policyInfoId:this.symbol,
          id:3,

        }).then((res)=>{
          console.log(res);
          this.$alert(res.data.msg)
        }).catch((err)=>{
            console.log(err);
        })
    },
      preview(){
      this.$router.push({name:'channelStep2'})
    }
  },
  mounted() {
      console.log(this.iconShow);
  },
};
</script>

<style scoped>
* {
  margin: 5px 0px;
}
li {
  list-style-type: none;
  margin:20px 0;
}
i{
  cursor: pointer;
  font-size: 18px;
  color:#409EFF;
}
#head {
  width: 100%;
  height: 10vh;
  line-height: 10vh;
  text-align: center;
  background: linear-gradient(to top, #99c9f1, #7cc4ff, #99c9f1);
}
.title{
  margin:0 1vw;
}
.middle{
  text-align: center;
}
</style>